<template>
    <div class="jianzhan-content">
        <Crumb name="配件出库汇总"/>
        <div class="content">
            <Search>
                <el-date-picker size="small" class="input" placeholder="Start Time" v-model="startTime" value-format="yyyy-MM-dd"/>
                <el-date-picker size="small" class="input" placeholder="End Time" v-model="endTime" value-format="yyyy-MM-dd"/>
                <el-select v-model="customer" placeholder="customer" class="input" size="small" clearable>
                    <el-option value="TID" label="TID"></el-option>
                    <el-option value="IMIP" label="IMIP"></el-option>
                </el-select>
                <el-button icon="el-icon-search" type="primary" @click="_getReport" size="small" class="input">Search</el-button>
                <!--<el-button icon="el-icon-tickets" type="primary" @click="getInvoice" size="small" class="input">Invoice</el-button>-->
                <el-button icon="el-icon-download" type="primary" @click="download" size="small" class="input">DownLoad Excel</el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="reportList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        row-key="id"
                        border
                        stripe
                >
                    <el-table-column prop="stockOutNum" label="Stock out No"/>
                    <el-table-column prop="depleteDateStr" label="Stock out date"/>
                    <el-table-column prop="customer" label="Customer"/>
                    <el-table-column prop="partsNumber" label="Parts No"/>
                    <el-table-column label="Parts Name">
                        <template slot-scope="part">
                            {{part.row.denomination}}/{{part.row.designation}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="depleteNum" label="Qty"/>
                    <el-table-column prop="hostNumber" label="Unit"/>
                    <el-table-column prop="stockQuantity" label="Storage"/>
                    <el-table-column prop="salePrice" label="Sale Price"/>


                </el-table>
                <div class="page">
                    <el-pagination
                            background
                            :page-size="pageSize"
                            @current-change="changePage"
                            layout="prev, pager, next"
                            :total="total"/>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import {getReport} from "../../api/service";
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";


    export default {
        name: "report",
        mixins: [mixins],
        data() {
            return {
                startTime: '',
                endTime: '',
                customer:'',
                reportList: []
            }
        },
        created() {
            this._getReport();
        },
        mounted(){
            this.$nextTick(() => {
                import('../../util/pdf.js').then(model => {
                    this.pdf = model.default;
                })
            })
        },
        methods: {
            async _getReport() {
                const {startTime, endTime,customer} = this;
                const {status, data} = await getReport({startTime, endTime,customer});
                if (status === ERROR_OK) {
                    this.reportList = data;
                    this.total = data.length
                } else {
                    this.$notify.warning('No data');
                    this.reportList = []
                }
            },

            getInvoice(){
                this._getReport();
                let body = [
                    [
                        {text: 'No', alignment: 'center'},
                        {text: 'Part No', alignment: 'center'},
                        {text: 'description', colSpan: 2, style: 'tableHeader', alignment: 'center'},
                        {},
                        {},
                        {text: 'Rate', style: 'tableHeader', alignment: 'center'},
                        {text: 'Qty', colSpan: 2, style: 'tableHeader', alignment: 'center'},
                        {},
                        {text: 'Line Total', style: 'tableHeader', alignment: 'center'},
                    ],
                    [
                        {text: '序号', style: 'tableHeader', alignment: 'center'},
                        {text: '配件编号', style: 'tableHeader', alignment: 'center'},
                        {text: '中文描述', style: 'tableHeader', alignment: 'center'},
                        {text: '英文描述', style: 'tableHeader', alignment: 'center'},
                        {text: '主机型号', style: 'tableHeader', alignment: 'center'},
                        {text: '单价', style: 'tableHeader', alignment: 'center'},
                        {text: '数量', style: 'tableHeader', alignment: 'center'},
                        {text: '单位', style: 'tableHeader', alignment: 'center'},
                        {text: '总计', style: 'tableHeader', alignment: 'center'}
                    ],
                    // [{text: 'Service Item',colSpan:4, style: 'tableHeader', alignment: 'left'},{},{},{},{text: 'Service Fee',colSpan:4, style: 'tableHeader', alignment: 'left'},{},{},{}]
                ];
                const mainBody = this.reportList.map((item, index) => {
                    return [index + 1, item.partsNumber, item.denomination, item.designation,item.hostNumber, item.salePrice, item.depleteNum, 'pc', item.salePrice * item.depleteNum]
                });
                body = body.concat(mainBody);
                let total = 0;
                mainBody.forEach(item => {
                    total += item[8]
                });

                let doc = {
                    filename: 'QO',
                    pageSize: 'LEGAL',
                    pageMargins: [10, 200, 10, 60],
                    header: [
                        {
                            margin: [20, 20, 20, 20],
                            columns: [
                                {
                                    width: '70%',
                                    text: [
                                        {
                                            text: 'PT INDONESIA EQUIPMENT LINE\n',
                                            style: 'header'
                                        },
                                        {
                                            text: "Leading in Service Innovation\n",
                                            style: 'subTitle'
                                        },
                                        ' No.17-18 Blok A, Ruko Inkopal Kelapa Gading \n',
                                        ' Jl. Boulevard Barat Raya Jakarta Utara 14240 Indonesia \n',
                                        ' Tel: 0800-1581212'
                                    ],

                                },
                                {
                                    width: '*',
                                    text: 'Invoice',
                                    style: 'title',
                                    alignment: 'right'
                                }
                            ],
                        },
                        {
                            margin: [20, -10, 0, 20],
                            columns: [
                                {
                                    width: 50,
                                    text: 'Bill To:'
                                },
                                {
                                    width: '60%',
                                    text: [
                                        "BUT HEBEI RESEARCH INSTITUTE OF CONSTRUCTION & GEOTECHNICAL INVESTIGATION CO,LTD \n",
                                        'THE CITY TOWER 12TH FLOOR UNIT 1N,JL,MH.THAMEIN NO 81,\nMENTENG,JAKARTA PUSAT\n',

                                    ]
                                },
                                {
                                    width: '*',
                                    text: [
                                        `Date: ${this.startTime}-${this.endTime}\n`,
                                        `Quotation: \n`,
                                        `SO/WO/PO : \n`,
                                        'Surat Jalan: \n',
                                        "Invoice:\n",
                                        'Customer Code:\n',
                                        "Faktur pajak No:\n"
                                    ]
                                }
                            ]
                        }
                    ],
                    content: [
                        {
                            layout: 'lightHorizontalLines',
                            alignment: 'center',
                            table: {
                                headerRows: 2,
                                // keepWithHeaderRows: 1,
                                body: body
                            }
                        },
                        {
                            margin: [20, 20, 20, 20],
                            columns: [
                                {
                                    width: '50%',
                                    text: [
                                        ' Make all checks payable to\n',
                                        'A/N: PT. INDONESIA EQUIPMENT LINE\n',
                                        'NO.: 0653700722\n',
                                        'BANK CENTRAL ASIA KCU KELAPA GADING'
                                    ]
                                },
                                {
                                    width: '*',
                                    text: [
                                        `Payment: ${total}\n`,
                                        {
                                            text:'Value added Tax 10%\n',
                                            alignment:'left',
                                        },
                                        `Total: ${total}\n`,
                                    ]
                                }
                            ]
                        }
                    ],
                    footer: [
                        {
                            text: 'If you have any questions or concerns, please contact 0800-1581212',
                            width: '100%',
                            alignment: 'center'
                        },
                        {text: 'THANK YOU FOR YOUR BUSINESS! ', width: '100%', alignment: 'center'}
                    ],

                    defaultStyle: {
                        font: 'msyh'
                    },

                    styles: {
                        header: {
                            fontSize: 15,
                            bold: true
                        },
                        title: {
                            fontWeight: 'light',
                            fontSize: 25,
                            bold: false
                        },
                        subTitle: {
                            fontSize: 12,
                            bold: true,
                            italic: true
                        }
                    }

                }
                this.pdf.open(doc);
            },
            download(){
                const url = process.env.NODE_ENV === 'production' ? 'http://47.100.240.34:8093' : 'http://192.168.1.204:8080';
                window.open(url+`/statistical_report/export_excel.do?startTime=${this.startTime}&endTime=${this.endTime}&customer=${this.customer}`);
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }
</style>